<%= turbo_frame_tag 'issue_grouping_picker' do %>
  <div class="flex items-center text-sm gap-2" data-controller="dropdown">
    <span><%= t(".in_grouping") %></span>

    <div class="relative cpy-grouping-picker-button"
      data-action="click->dropdown#toggle click@window->dropdown#hide"
      role="button" aria-haspopup="true" aria-expanded="false"
      data-dropdown-target="button"
      >
      <div class=" cursor-pointer text-sm rounded-md w-full flex justify-between items-center border-base-300 bg-base-100 border px-3 py-1">
        <span class="mr-2">
          <% if issue.groupings.empty? %>
            <%= t(".no_grouping") %>
          <% else %>
            <%= issue.groupings.first.title %>
          <% end %>
        </span>

        <%= icon_for(:menu_arrow_down) %>
      </div>

      <div data-dropdown-target="menu" class="flex min-w-content flex-col bg-base-200 absolute z-10 top-full left-0 border border-base-300 rounded-lg shadow-lg overflow-hidden whitespace-nowrap mt-1 hidden cpy-grouping-picker-container">
        <% issue.project.default_visualization.groupings.each do |grouping| %>
          <% css_classes = "hover:bg-secondary hover:text-secondary-content py-2 px-4" %>
          <% is_selected = issue.groupings.first == grouping %>
          <% css_classes += " bg-secondary text-secondary-content" if is_selected %>
          <% if is_selected %>
            <span class="<%= css_classes %>"><%= grouping.title %></span>
          <% else %>
            <%= link_to pick_grouping_issue_path(issue, grouping_id: grouping.try(:id)),
              data: { turbo_method: :patch, turbo_frame: 'issue_pick_grouping' },
              class: css_classes do %>
              <span><%= grouping.title %></span>
            <% end %>
          <% end %>
        <% end %>

        <% css_classes = "hover:bg-secondary hover:text-secondary-content py-2 px-4" %>
        <% is_selected = issue.groupings.empty? %>
        <% css_classes += " bg-base-100" if is_selected %>
        <% if is_selected %>
            <span class="<%= css_classes %>"><%= t(".no_grouping") %></span>
        <% else %>
          <%= link_to pick_grouping_issue_path(issue, grouping_id: nil),
            data: { turbo_method: :patch, turbo_frame: 'issue_pick_grouping' },
            class: css_classes do %>
            <p><%= t(".no_grouping") %></p>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>
